<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>
            <!-- 导航链接，使用History模式（无#前缀） -->
            <a href="/home">首页</a>
        </li>
        <li>
            <a href="/about">关于</a>
        </li>
    </ul>
    <!-- 用于展示路由对应的组件内容的容器 -->
    <div id="root"></div>
</body>
<script>
    // 定义路由配置数组
    const routes=[
        {
            path:'/home',  // 路由路径
            component:()=>{  // 路由对应的组件（函数形式返回HTML字符串）
                return '<h1>首页</h1>'
            }
        },
        {
            path:'/about',
            component:()=>{
                return '<h1>关于</h1>'
            }
        }
    ]
    
    // 获取用于渲染组件的DOM容器
    const renderView=document.getElementById('root')
    
    // 页面加载完成后，初始化路由
    window.addEventListener('DOMContentLoaded',()=>{
        onLoad()
    })
    
    // 监听popstate事件，处理浏览器前进/后退操作
    window.addEventListener('popstate',()=>{
        // 根据当前URL路径切换组件
        routerView(location.pathname)
    })
    
    // 初始化函数，设置导航链接的点击事件
    function onLoad(){
        // 获取页面上所有带有href属性的a标签
        let linkList=document.querySelectorAll('a[href]')
        
        // 遍历所有a标签
        linkList.forEach(el=>{
            // 为每个a标签添加点击事件监听
            el.addEventListener('click',(e)=>{
                // 阻止a标签的默认跳转行为（防止页面刷新）
                e.preventDefault()
                
                // 使用pushState修改URL，添加新的历史记录
                // el.getAttribute('href')获取a标签的href属性值
                history.pushState(null,'',el.getAttribute('href'))
                
                // pushState会进入浏览器的历史栈中，使前进/后退按钮有效
                // 但是不会触发popstate事件，所以需要手动调用routerView函数
                
                // 根据新的URL路径切换组件
                routerView(location.pathname)
            })
        })
    }
    
    // 根据URL路径切换对应的组件
    function routerView(url){
        // 在routes数组中查找匹配的路由
        const index=routes.findIndex(item=>{return item.path===url})
        
        // 如果找到匹配的路由
        if(index!==-1){
            // 调用组件函数并将结果渲染到容器中
            renderView.innerHTML=routes[index].component()
        }
    }
</script>
</html>